<template>
    <div class="login-page">
        <canvas id="space"></canvas>
        <div class="page-wrapper">
            <div class="header">
                <div class="header-wrapper">
                    <div class="logo-wrapper">
                        <img class="logo" :src="`/static/${themeColor}-img/logo.png`"  />   
                        <div>
                            <p class="ch"><span class="logo_text">{{$t('login.logo')}}</span>{{$t('login.zhlogo')}}</p>
                            <p class="en">{{$t('login.enlogo')}}</p>
                        </div>
                    </div>
                    <div style="display:flex;align-items:center">
                        <!-- <div class="global" >
                            <img :src="`/static/${themeColor}-img/switch.png`" />
                            <span :class="lang=='zh'?'active':'unactive'" @click="changeLang('zh')">中文</span>
                            <span :class="lang=='en'?'active':'unactive'" @click="changeLang('en')">English</span>
                        </div>                         -->
                        <div class="theme">
                            <label class="active">{{$t('login.themeLabel')}}</label>
                            <select v-model="theme_color" @change="changeTheme(theme_color)">
                                <option value="red">{{$t('login.red')}}</option>
                                <option value="blue">{{$t('login.blue')}}</option>
                            </select>
                        </div>
                    </div>            
                </div>
            </div>
            <div class="cont_wrap">
                <div class="left_pic mouse" v-on:mouseenter = 'mouseIn()' v-on:mouseleave = 'mouseOut()'>
                    <div class="main">
                        <img :src="`/static/${themeColor}-img/zhuti.png`"/>
                    </div>
                    <div class="lightcircle">
                        <img :src="`/static/${themeColor}-img/guanghuan.png`"/>
                    </div>
                    <div class="light">
                        <img :src="`/static/${themeColor}-img/light.png`">
                    </div>
                    <div class="circle010110">
                        <img :src="`/static/${themeColor}-img/010110.png`">
                    </div>
                    <div class="circle10100">
                        <img :src="`/static/${themeColor}-img/10100circle.png`">
                    </div>
                    <div class="circle010">
                        <img :src="`/static/${themeColor}-img/010circle.png`">
                    </div>
                    <div class="circle0100">
                        <img :src="`/static/${themeColor}-img/010copy.png`">
                    </div>
                    <div class="circle101000">
                        <img :src="`/static/${themeColor}-img/10100.png`">
                    </div>
                    <div class="circle0101100">
                        <img :src="`/static/${themeColor}-img/010110copy.png`">
                    </div>
                    <div class="circle0101">
                        <img :src="`/static/${themeColor}-img/circle0101.png`">
                    </div>
                </div>
                <div class="right">
                    <div>                   
                        <h3>{{$t('login.loginLabel')}}</h3>
                        <div class="login-form">                       
                            <div style="margin:30px 60px ">                       
                                <div>
                                    <label>{{$t('login.userNameLabel')}}</label>
                                    <span v-if ="punish_time" style="color: red;margin-left:20px">{{time_error}}</span>
                                    <span v-else style="color: red;margin-left:20px">{{error}}</span>                      	
                                </div>
                                    <input class="username login-input" v-model="username" type="text"  @blur="testVal('.username','allpass')" @focus="isEmpty('.username')"/>
                                <div>
                                    <label>{{$t('login.passWroldLabel')}}</label>
                                </div>
                                    <input class="password login-input" v-model="password" type="password" @keyup.enter='goLogin'  @blur="testVal('.password','allpass')" @focus="isEmpty('.password')"/>
                                <div style="margin-bottom:20px;font-size:12px;">
                                    <input type="checkbox" disabled="disabled"/>
                                    <span style="margin-left:2px;margin-right:15px;color:#c2c2c2">{{$t('login.DkeyLogin')}}</span>
                                    <span style="color:#007cef;cursor:pointer;">{{$t('login.activex')}}</span>
                                </div>
                                <div v-if="punish_time" class="punish-button">
                                    <span class="span">惩罚剩余时间：{{punish_time}}s</span>
                                </div>
                                <div  v-else class="sim-button"  @click="goLogin">
                                    <span class="span">{{$t('login.loginButton')}}</span>
                                    <span class="line line-top"></span>
                                    <span class="line line-right"></span>
                                    <span class="line line-bottom"></span>
                                    <span class="line line-left"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p v-if="accredit !== 'valid'" class="accredit_notice">{{certError}}</p>
                    <div v-else>
                        <p v-if = "accreditShow" class="accredit_notice">系统将于{{misstime}}授权过期，请及时更新授权文件！</p>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div>
                    <span>北京卫达信息技术有限公司版权所有</span>
                    <span>Copyright © 2015-{{year}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import userService from 'services/userService'
import formatTest from 'libs/formatTest'
import Vue from 'vue'
export default {
    data() {
        return {
            theme_color:'',
            username: '',
            password: '',
            error:'',
            punish_time:null,
            time_error:null,
            year:'',
            lang:''
        }
    },
    computed:{
        accredit: function() {
            return this.$store.state.cert.status
        },
        misstime: function() {
            return this.getLocalTime(this.$store.state.cert.end_time)
        },
        accreditShow: function() {
            return this.$store.state.cert.alive_time < 604800
        },
        certError: function() {
            let type=''
            switch (this.$store.state.cert.status) {
                case 'expired':
                    type='系统授权文件过期，请联系供应商获取授权文件！'
                    break;
                case 'missing':
                    type='系统授权文件缺失，请联系供应商获取授权文件！'
                    break;
                case 'device_not_match':
                    type='系统授权文件和设备不匹配，请联系供应商获取授权文件！'
                    break;
                case 'malform':
                    type='系统授权文件内容格式错误，请联系供应商获取授权文件！'
                    break;
                case 'type_error':
                    type='系统授权文件类型错误，请联系供应商获取授权文件！'
                    break;
                case 'unknown':
                    type='系统授权文件状态未知，请联系供应商获取授权文件！'
                    break;
                case 'uninit':
                    type='系统未授权，请联系供应商获取授权文件！'
                    break;
                default:
                    break;
            }
            return type
        }
    },
    mounted: function() {
        this.year = new Date().getFullYear()
        $('.login-input').eq(0).focus()
        this.bgload()
        this.theme_color = localStorage.getItem('themeColor')||'red'
        this.lang = localStorage.getItem('lang')||'en'
    },
    watch: {
    	punish_time:function() {
    		if (this.punish_time>0) {
    		   clearInterval(this.intervalid)
    		   this.intervalid = setInterval(() => this.punish_time--, 1000)
    		} else {
    		   clearInterval(this.intervalid)
    		}
    	}
    },
    methods: {
        changeTheme(theme) {  
            Vue.prototype.themeColor = theme
            this.theme_color = theme
            $('#app').attr('class', 'theme-' + theme) 
            window.localStorage.setItem('themeColor', theme)
        },
        changeLang(lang) {
            this.lang = lang
            // Vue.prototype.i18n.locale = lang   
            // window.localStorage.setItem('lang',lang)
        },
        getLocalTime(nS) {     
            return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');     
        },
    	testVal: function(ele, reg) {
			let val = $(ele).val()
			let test = new formatTest(ele, reg, false)
			return test.testFormat()
		},
		isEmpty: function(ele) {
			let test = new formatTest(ele)
			test.notEmpty()
			$('.notice').hide()
		},
        bgload() {
            window.requestAnimFrame = (function() {
                return window.requestAnimationFrame
            })();
            let canvas = document.getElementById("space");
            let c = canvas.getContext("2d");
            let numStars = 1900;
            let radius = '0.' + Math.floor(Math.random() * 9) + 1;
            let focalLength = canvas.width * 2;
            let warp = 0;
            let centerX, centerY;
            let stars = [],
                star;
            let i;
            let animate = true;
            initializeStars();

            function executeFrame() {
                if (animate)
                requestAnimFrame(executeFrame);
                moveStars();
                drawStars();
            }

            function initializeStars() {
                centerX = canvas.width / 2;
                centerY = canvas.height / 2;
                stars = [];
                for (i = 0; i < numStars; i++) {
                    star = {
                        x: Math.random() * canvas.width,
                        y: Math.random() * canvas.height,
                        z: Math.random() * canvas.width,
                        o: '0.' + Math.floor(Math.random() * 99) + 1
                    };
                    stars.push(star);
                }
            }

            function moveStars() {
                for (i = 0; i < numStars; i++) {
                    star = stars[i];
                    star.z--;
                    if (star.z <= 0) {
                        star.z = canvas.width;
                    }
                }
            }

            function drawStars() {
                let pixelX, pixelY, pixelRadius;
                // Resize to the screen
                if (canvas.width != window.innerWidth || canvas.width != window.innerWidth) {
                    canvas.width = window.innerWidth;
                    canvas.height = window.innerHeight;
                    initializeStars();
                }
                if (warp == 0) {
                    c.fillStyle = "#0c0000";
                    c.fillRect(0, 0, canvas.width, canvas.height);
                }
                c.fillStyle = "rgba(209, 255, 255, " + radius + ")";
                for (i = 0; i < numStars; i++) {
                    star = stars[i];
                    pixelX = (star.x - centerX) * (focalLength / star.z);
                    pixelX += centerX;
                    pixelY = (star.y - centerY) * (focalLength / star.z);
                    pixelY += centerY;
                    pixelRadius = 1 * (focalLength / star.z);
                    c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
                    c.fillStyle = "rgba(209, 255, 255, " + star.o + ")";
                    //c.fill();
                }
            }
            executeFrame();
        },
        goLogin() {
        	let testName = this.testVal('.username', 'allpass')
        	let testPassword = this.testVal('.password', 'allpass')
        	if (testName && testPassword) {
        		userService.login(this.username, this.password)
	            .then((res) => {
	                if (res.errcode === 0) {
                        res.is_login = true
                        res.username = this.username
                        this.$store.commit('EDIT_LOGIN', res)
	                } else {
	                	this.error = this.$t('error_code.' + res.errcode)
	                	// this.punish_time = res.erroroverplus_time               
                        // this.time_error = res.errorerror_tag     
                        console.log('error_code.' + res.errcode)
                                    
	                }
	            })
        	}
            
        },
        mouseIn(e) {
            $(".mouse").on("mousemove",function(e) {
                if (e.offsetX-840<0) {
                    $(".lightcircle").css("top",-e.offsetY*0.01+100+"px");
                    $(".ellipse").css("top",-e.offsetY*0.01-300+"px");
                    $(".main").css("top",-e.offsetY*0.01+"px");
                    $(".circle0101").css("bottom",e.offsetY*0.02+140+"px");              
                    $(".circle0101100").css("bottom",e.offsetY*0.02+80+"px");                   
                    $(".circle101000").css("bottom",e.offsetY*0.02+50+"px");
                    $(".circle0100").css("top",-e.offsetY*0.02+"px");
                    $(".circle010").css("bottom",e.offsetY*0.02+40+"px");
                     $(".circle10100").css("top",-e.offsetY*0.02+30+"px");
                    $(".circle010110").css("top",-e.offsetY*0.02-55+"px");
                    $(".light").css("top",-e.offsetY*0.02-40+"px");
                };  
            })
        },
        mouseOut() {
            document.onmousemove = null;
        }
    }
}
</script>

